<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- ����첽���󶹰�ͼƬ����Error 403��ԭ�򣺶�����з����� -->
    <meta name="referrer" content="never" />
    <title>最近上映电影</title>
    <!-- 1. ����Echarts.js�����JS -->
    <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 2. ΪECharts׼��һ���߱���С����ߣ���Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
    <script type="text/javascript">
        // 3. ��ʼ��echartsʵ��
        var myChart = echarts.init(document.getElementById("main"));
        // 4. ����Echarts option������
        myChart.showLoading();  // ��ʾloading���ض���
        // setData��������myChart��option�������ã�����ʾͼ��
        var setData = (function(){
            var option = {
                title: {
                    text: "最近上映电影",
                    left: "50%",
                    textAlign: 'center'
                },
                // grid�����ֱ������ϵ�ڻ�ͼ�������ڶ�λͼƬ�����λ��
                grid: {
                    left: 0,
                    right: 20,
                    bottom: 100,
                    top: 30
                },
                // ��괥����ʾ��Ϣ��ʽ
                tooltip: {
                    formatter: function(params) {
                        // pictorialBar���жϴ����������Ϊ��pictureͼƬ
                        if (params.componentSubType == "pictorialBar") {
                            return "电影：" + params.name + "</br> 豆瓣评分" + (params.value * 1 + 10).toFixed(1);
                        }
                    }
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    // ����y����ʾ
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                },
                series: [
                    // �����������
                    {
                        type: 'bar',
                        barWidth: 1,
                        data: [],
                        // ��Ч����
                        animationDelay: function(ids) {     // ��ʱ��ʾ�Ķ���Ч����idsΪ��Ŀ������
                            return ids * 100;
                        }
                    },
                    // ͼƬ�������
                    {
                        type: 'pictorialBar',
                        symbolPosition: 'end',
                        symbolRotate: 165,
                        symbolOffset: ['20%', '100%'],      // ͼƬˮƽƫ�ƽǶ�
                        data: [],                           // ����api���ص�pic_url��̬���ͼƬ
                        animationDelay: function(ids) {    // ��ʱ��ʾ�Ķ���Ч����idsΪ��Ŀ������
                            return ids * 100 + 500;
                        }
                    },
                    // graph����ϵͼ������չ�ֽڵ��Լ��ڵ�֮��Ĺ�ϵ���ݣ������γ�һ���ڵ㰴ť��ʵ���������
                    {
                        type: 'graph',
                        data: [{
                            X: 0,
                            Y: 0,
                            symbolSize: 0                   // ��ϵͼ�ڵ��ǵĴ�С
                        },{
                            // ����ť��λ�ü���С
                            name: '����',
                            x: 550,
                            y: 25,
                            symbolSize: 30
                        }],
                        // �ڵ����ʽ
                        itemStyle: {
                            normal: {
                                // color: 'transparent',   // ͸��Ч��
                                color: '#282923',
                                borderWidth: 1,
                                borderColor: '#555'
                            }
                        }
                    }
                ]
            };
            var mark = 1;
            // �������
            return function(){
                var pics = [];
                var d = JSON.parse(localStorage.getItem('data'));
                for (var i = 0; i < d.subjects.length; i++) {
                    // ˵����d.subjects[i].images.small = https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2576090251.webp
                    var img = d.subjects[i].images.medium;
                    console.log(img)
                    pics.push({
                        value: ((d.subjects[i].rating.average || 0.1) - 10).toFixed(1),
                        symbol: 'image://' + img,    // ��image��//���onlineͼƬ
                        symbolSize: ['48.75', '75'],
                        name: d.subjects[i].title,   // ��Ӱ������
                        id: d.subjects[i].id         // ��Ӱ��id
                    })
                }
                // ���򷽷�
                if (mark % 2 == 0) {
                    pics.sort(function(a, b) {
                        return (mark / 2 | 0) % 2 == 0 ? (b.value - a.value) : (a.value - b.value)
                    })
                }
                option.series[0].data = pics;
                option.series[1].data = pics;
                myChart.hideLoading();
                // ʹ������ָ�����������������ʾͼ��
                myChart.setOption(option);
                mark++;
            }
        })();   // ֱ�ӵ�����������������ֵ��һ��function��ֵ������setData
        // localStorage���ã��ȴӱ��ػ����л�ȡdata����������ݾ͵���setData����������Ӷ���api�첽���ȡ����
        if (localStorage.getItem("data")) {
            setData();
        } else {
            $.ajax({
                type: "GET",
                url: "https://douban.uieee.com/v2/movie/in_theaters",   // ������ӳ�ĵ�Ӱ��ϸ
                dataType: "jsonp",      // jsonp��������첽��ȡ��Դ�Ŀ�������
                success: function(d) {
                    localStorage.data = JSON.stringify(d);  // ���Ӷ���API��ȡ������ת��ΪJSON��ʽ�Ķ���󣬱����ڱ��ػ�����
                    console.log(localStorage.data);
                    setData();
                }
            });
        }
        // ʵ�ָ�myChartͼ����ʱ���õ���ǰ��Ӱ����Ӧ�ĵ�ӰID������ת����Ӧ��url�鿴��ǰ��Ӱ������
        myChart.on("click", function(params) {
            console.log(params);
            if (params.name == "����") {
                setData();
            }else if (params.componentSubType == "pictorialBar") {
                window.open("https://movie.douban.com/subject/" + params.data.id + "?date=" + new Date().getTime())
            }
        })
    </script>
</body>
</html>
